<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.kuang{
				width: 200px;
				height: 50px;
				position: relative;
				left: 100px;
				top: 100px;
				border: 1px solid black;
				overflow: hidden;
			}
			.nengliang{
				width: 200px;
				height: 50px;
				background: skyblue;
				position: absolute;
				left: -200px;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="kuang">
			<div class="nengliang"></div>
		</div>
		<script>
			var kuang = document.querySelector('.kuang');
			var nengliang = document.querySelector('.nengliang');
			console.log(nengliang.offsetLeft);
			var value = -200;
//			nengliang.style.left = -200 + 'px';
			setInterval(function(){
				value+=10;
				nengliang.style.left = value/200 * 100 + '%';
			},1000)
			
			
		</script>
	</body>
</html>
